<template>
  <div class="newPatentDetails-container-padding">
    <div class="buttonList">
      <el-button type="primary" @click="edit">修改</el-button>
      <el-button>导出数据</el-button>
    </div>
    <el-descriptions
      title=""
      class="margin-top20"
      :column="detailsDescriptions.top.length"
      direction="vertical"
      size="large"
      border
    >
      <el-descriptions-item
        v-for="(item, index) in detailsDescriptions.top"
        :key="index"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="项目信息："
      class="margin-top20"
      :column="detailsDescriptions.projectDescriptions.length"
      direction="vertical"
      size="large"
      border
    >
      <el-descriptions-item
        v-for="(item, index) in detailsDescriptions.projectDescriptions"
        :key="index"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="课题信息："
      class="margin-top20"
      :column="detailsDescriptions.subjectDescriptions.length"
      direction="vertical"
      size="large"
      border
    >
      <el-descriptions-item
        v-for="(item, index) in detailsDescriptions.subjectDescriptions"
        :key="index"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      title="其他信息："
      class="margin-top20"
      style="margin-bottom: 20px"
      :column="detailsDescriptions.otherDescriptions.length"
      direction="vertical"
      size="large"
      border
    >
      <el-descriptions-item
        v-for="(item, index) in detailsDescriptions.otherDescriptions"
        :key="index"
        :label="item.label"
        align="center"
        label-align="center"
      >
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider />
    <div class="title margin-top20">一、项目基本情况</div>
    <Form1 :is-disabled="true" :is-update="isUpdate" class="margin-top20" />
    <div class="title margin-top20">二、推荐项目简介</div>
    <Form2
      :is-craft="isCraft"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
    <div class="title margin-top20">三、推荐理由</div>
    <Form3
      :is-craft="isCraft"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
    <div class="title margin-top20">四、经济效益情况表（单位：万元）</div>
    <Form4
      :is-craft="isCraft"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
    <div class="title margin-top20">五、已获奖励情况</div>
    <Form5 :is-disabled="true" :is-update="isUpdate" class="margin-top20" />
    <div class="title margin-top20">六、专利情况</div>
    <Form6 :is-disabled="true" :is-update="isUpdate" class="margin-top20" />
    <div class="title margin-top20">七、技术秘密</div>
    <Form7 :is-disabled="true" :is-update="isUpdate" class="margin-top20" />
    <div class="title margin-top20">
      八、主要完成人情况表
      <span class="subtitle">
        (注：1、按申报奖励等级填报人数，特等奖20人，一等奖12名，二等奖10名，三等奖8名)
      </span>
    </div>
    <Form8
      ref="child8"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
    <div class="title margin-top20">九、主要完成单位情况</div>
    <Form9
      ref="child9"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
    <div class="title margin-top20">十、推荐意见</div>
    <Form10
      ref="child10"
      :is-disabled="true"
      :is-update="isUpdate"
      class="margin-top20"
    />
  </div>
</template>

<script setup lang="ts">
  import { detailsDescriptions } from '../table/column'
  import { useRoute } from 'vue-router'
  import { reactive, ref, watch, onMounted } from 'vue'
  import Form1 from './form1.vue'
  import Form2 from './form2.vue'
  import Form3 from './form3.vue'
  import Form4 from './form4.vue'
  import Form5 from './form5.vue'
  import Form6 from './form6.vue'
  import Form7 from './form7.vue'
  import Form8 from './form8.vue'
  import Form9 from './form9.vue'
  import Form10 from './form10.vue'
  import {
    VXETable,
    VxeGridInstance,
    VxeGridProps,
    VxeGridListeners,
  } from 'vxe-table'
  import { Plus } from '@element-plus/icons-vue'
  import { getAchievementInfo } from '@/api/achievementAward'
  import { useAchievementAwardStore } from '@/store/modules/achievementAward'
  import dayjs from 'dayjs'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  const route = useRoute()
  const id = ref()
  const store = useAchievementAwardStore()
  const { closeTabNavigate } = useCloseTabNavigate()

  const formInline = ref({})
  const getInfo = (id: number | string) => {
    getAchievementInfo({ id, getType: 2 }).then((res) => {
      const data = res.data
      isUpdate.value = true
      store.resetForm()
      store.setForm(data)
      formInline.value = data
      const startDate = dayjs(data.researchStartDate).format('YYYY-MM-DD')
      const endDate = dayjs(data.researchEndDate).format('YYYY-MM-DD')
      formInline.value.researchDate = `${startDate}-${endDate}`
      formInline.value.keyProject = data.keyProject == 1 ? ' 是' : '否'
      formInline.value.createTime = dayjs(data.createTime).format('YYYY-MM-DD')
    })
  }

  const isUpdate = ref(false)
  const isCraft = ref(0)
  onMounted(() => {
    isCraft.value = Number(route.query.isCraft)
    watch(
      () => route.query.isCraft,
      (val) => {
        isCraft.value = val
      },
      { immediate: true, deep: true }
    )

    id.value = route.query.id
    getInfo(id.value)
  })
  const isEdit = ref(false)

  const save = () => {
    isEdit.value = false
  }
  const edit = () => {
    closeTabNavigate({
      name: 'AddAward',
      query: { id: id.value, isCraft: isCraft.value },
    })
  }

  const handStop = (value: boolean) => {
    save()
  }

  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const handlePageChange: VxePagerEvents.PageChange = ({
    currentPage,
    pageSize,
  }) => {
    tablePage.currentPage = currentPage
    tablePage.pageSize = pageSize
    // findList()
  }
</script>

<style scoped lang="scss">
  $margin-bottom: 20px;
  .buttonList {
    display: flex;
    justify-content: end;
    padding-bottom: $margin-bottom;
    border-bottom: 1px solid #edeff2;
    margin-bottom: $margin-bottom;
  }
  .title {
    border-radius: 2px;
    border-left: 5px solid #1890ff;
    height: 28px;
    background: #f7f8f9;
    font-weight: 500;
    font-size: 14px;
    color: #606266;
    padding-left: 12px;
    line-height: 28px;
    // margin-bottom: $margin-bottom;
  }
  // .form-inline {
  //   display: grid;
  //   grid-template-columns: repeat(3, 1fr);
  //   grid-column-gap: 20px;
  //   :deep(.el-form-item) {
  //     margin-right: 0;
  //   }
  // }
  .inventor {
    p {
      text-align: left;
    }
    text-align: center;
  }
  .margin-top20 {
    margin-top: 20px;
  }
</style>
